Clients

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Hinweis: Diese Funktion ist nur in Service Workers verfügbar.

Das Clients-Interface bietet Zugriff auf Client-Objekte. Greifen Sie darauf mit [self](/de/docs/Web/API/ServiceWorkerGlobalScope).clients innerhalb eines Service Workers zu.

Instanzmethoden

Clients.get()

Gibt ein Promise für einen Client zurück, der mit einer gegebenen id übereinstimmt.

Clients.matchAll()

Gibt ein Promise für ein Array von Client-Objekten zurück. Ein Optionsargument ermöglicht es Ihnen, die Typen der zurückgegebenen Clients zu steuern.

Clients.openWindow()

Öffnet ein neues Browserfenster für eine gegebene URL und gibt ein Promise für den neuen WindowClient zurück.

Clients.claim()

Ermöglicht einem aktiven Service Worker, sich selbst als controller für alle Clients innerhalb seines scope zu setzen.

Beispiele

Das folgende Beispiel zeigt ein vorhandenes Chat-Fenster oder erstellt ein neues, wenn der Benutzer auf eine Benachrichtigung klickt.

js
addEventListener("notificationclick", (event) => {
  event.waitUntil(
    (async () => {
      const allClients = await clients.matchAll({
        includeUncontrolled: true,
      });

      let chatClient;

      // Let's see if we already have a chat window open:
      for (const client of allClients) {
        const url = new URL(client.url);

        if (url.pathname === "/chat/") {
          // Excellent, let's use it!
          client.focus();
          chatClient = client;
          break;
        }
      }

      // If we didn't find an existing chat window,
      // open a new one:
      chatClient ??= await clients.openWindow("/chat/");

      // Message the client:
      chatClient.postMessage("New chat messages!");
    })(),
  );
});

Spezifikationen

Specification
Service Workers
# clients-interface

Browser-Kompatibilität

Siehe auch